<template>
  <el-tabs
    v-model="tabState.activeName"
    type="card"
    @tab-click="tabClick"
  >
    <el-tab-pane label="桌面" :name="0">桌面</el-tab-pane>
    <el-tab-pane
      v-for="(item, index) in tabData"
      :key="'tab_' + item.id"
      :label="item.title"
      :name="item.id"
    >
      <template #label>
        <span>{{item.title}} &nbsp; &nbsp;
          <i class="el-icon-error" @click.stop="tabRemove(item.id, index)" ></i>
        </span>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { defineProps, watch } from 'vue'
import { useRouter } from 'vue-router'
// 状态
import VueDS from 'vue-data-state'

/**
 * tab标签的管理类
 */
const tabManage = (tabState) => {
  // 绑定 tab 的数据
  const tabData = tabState.tabData // tab的数据

  // 当前的路由数据
  const { currentRoute, push } = useRouter()

  // 监听 路由变化
  // console.log('路由——router', currentRoute)
  watch(() => currentRoute.value.params, (param) => {
    console.log('监听的 param ', param)
    if (Object.keys(param).length === 0) return

    const modId = parseInt(param.moduleId)
    // 判断是否已经生成标签
    if (tabData.findIndex((item) => item.id === modId) === -1) {
      // 没有标签，创建新标签
      const m = tabState.menu.filter(a => a.id === parseInt(modId))[0]
      if (typeof m !== 'undefined') {
        tabData.push({
          id: modId, // 模块ID
          isList: m.kind === 'list',
          componentKind: m.componentKind, // 组件字典类型
          title: m.title // 标签
        })
      }
    }
    // 激活标签
    tabState.activeName = modId
  },
  { deep: true, immediate: true })

  // 删除 tab
  const tabRemove = (modId, index) => {
    // console.log('tabRemove', modId)
    // 找到要删除 tab 的下标
    // const index = tabData.findIndex((item) => item.id === modId)
    // 判断是不是激活的tab。非激活，直接删除；激活的，删除后找到左面的tab
    if (modId === tabState.activeName) {
      if (tabData.length > 1) {
        // 删除激活 tab，激活左侧标签
        tabState.activeName = tabData[index - 1].id
        // 路由跳转
        const currMenu = tabState.menu.filter((a) => a.id === modId)[0]
        push({ name: currMenu.routeName, params: { moduleId: modId } })
      } else {
        // 激活桌面
        tabState.activeName = 0
      }
    }
    tabData.splice(index, 1)
  }

  // 单击tab，切换路由
  const tabClick = (tab) => {
    // console.log('handleClick', tab)
    // console.log('handleClick', tab.props.name)
    const modId = parseInt(tab.props.name)
    const currMenu = tabState.menu.filter((a) => a.id === modId)[0]

    // 设置状态
    tabState.trigger = 'tab'
    tabState.activeId = modId
    tabState.activeName = modId
    switch (currMenu.kind) {
      case 'list':
        push({ name: currMenu.routeName, params: { moduleId: modId } })
        break
      case 'other':
        push({ name: currMenu.routeName, params: { moduleId: modId } })
        break
    }
  }
  return {
    tabRemove,
    tabClick
  }
}
</script>

<script setup>
  // 属性：模块ID
  const props = defineProps({
    moduleId: [Number, String]
  })

  // 访问状态
  const { get } = VueDS.useStore()
  // 注册 tab 的状态
  const tabState = get.tabState()
  const tabData = tabState.tabData // tab的数据

  // 使用tab的管理类
  const {
    tabRemove, // 删除tab的事件
    tabClick // tab的单击事件，路由导航
  } = tabManage(tabState)

</script>
